<template>
    <el-dialog :model-value="localDialogVisible" :title="localTitle" :before-close="localCancelDialog" width="40%" top="5vh">
        <div class="sharetitle">已选择媒资</div>
        <!-- <div class="mediaboxselect" :class="isDisabled?'mediaboxselectflow':''">
            <div v-for="mediainfo in localDialogData.medias" :key="mediainfo.mediaid" class="medianame">
                {{mediainfo.name}}({{mediainfo.mediaid}})
            </div>
        </div>
        <div class="clsmore"><a @click="moreClick">{{!isDisabled?'更多':'收起'}}</a></div> -->
        <el-scrollbar max-height="120px" :always="true">
            <div v-for="mediainfo in localDialogData.medias" :key="mediainfo.mediaid" class="medianame">
                {{mediainfo.name}}({{mediainfo.mediaid}})
            </div>
        </el-scrollbar>
        <div v-loading="loading" class="mt10">
            <corp-partner
                v-model:corpPartnerCheckList="corpPartnerCheckList"
                v-model:shareConfirmButton="shareConfirmButton"
                :ps-content="'PS:分享后合作企业可查看与使用媒资'"
                :empty-content="'暂无可分享企业，请先建立企业互信关系再进行媒资分享'"
                ref="corpPartnerRef"
            />
        </div>
        <template #footer>
            <div v-if="shareConfirmButton" align="center">
                <el-button type="primary" size="small" @click="handleMediaShare">确定</el-button>
                <!-- <el-button type="primary" size="small" @click="localCancelDialog">取消</el-button> -->
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import { ref, toRef, nextTick } from 'vue'
    import { shareMediaToCorp, getMediaRelPartners } from '@/api/corppartner/index'
    import {ElMessage, ElMessageBox} from 'element-plus'
    import CorpPartner from '@/components/Common/CorpPartner/Index'
    export default {
        name: "",
        components: {
            CorpPartner
        },
        props: {
            title:{
                type: String,
                default: ''
            },
            visible: {
                type: Boolean,
                default: false
            },
            toDialogData: {
                type: Object,
                required: true
            }
        },
        emits: ['cancelDialog','getData'],
        setup(props, context) {
            const localTitle = toRef(props, 'title')
            const localDialogVisible = toRef(props, 'visible')
            const localDialogData = toRef(props, 'toDialogData')
            const localCancelDialog = () => {
                context.emit('cancelDialog')
            }
            const loading = ref(false)

            const shareConfirmButton = ref(false)
            const corpPartnerRef = ref(null)
            const corpPartnerCheckList = ref([])
            /* 获取互信企业---start */
            
            if( localDialogData.value.medias.length == 1 ){
                console.log('123')
                getMediaRelPartnersList(localDialogData.value.medias[0].mediaid)
            }else{
                nextTick(() => {
                    corpPartnerRef.value.init()
                })
            }
            /* 获取互信企业---end */

            /* 获取已分享企业列表---start */
            async function getMediaRelPartnersList( mediaid ) {
                let result = await getMediaRelPartners({mediaid:mediaid})
                if( result.errcode == 0 ){
                    result.data.length > 0 ? Object.assign(corpPartnerCheckList.value, result.data) : ''
                    if(corpPartnerRef.value){
                        corpPartnerRef.value.init()
                    }
                }else{
                    console.log(result)
                }
            }
            /* 获取已分享企业列表---end */


            const isDisabled = ref(false);
            const moreClick = () => {
                isDisabled.value=!isDisabled.value;
                console.log('cc')
            }

            
            const handleMediaShare = () => {
                /*if( corpPartnerCheckList.value.length <= 0 ){
                    ElMessage({type: 'warning', message: '请选择要分享的内容包', duration: 2000})
                    return
                }*/
                if( localDialogData.value.medias.length <= 0 ){
                    ElMessage({type: 'warning', message: '媒资ID为空', duration: 2000})
                    return
                }
                let mediaids = []
                localDialogData.value.medias.forEach(function(v){
                    mediaids.push(v.mediaid)
                })
                let query = {
                    mediaids:mediaids,
                    partnercorpids:corpPartnerCheckList.value
                }
                let elMessage = ''
                let elMessageTitle = ''
                if( corpPartnerCheckList.value.length <= 0 ){
                    elMessage = '确定 <strong>清除</strong> 所选媒资的分享吗？'
                    elMessageTitle = '媒资清除分享'
                }else{
                    elMessage = '确定将媒资分享到所选的企业？'
                    elMessageTitle = '媒资分享'
                }
                ElMessageBox.confirm(elMessage, elMessageTitle, {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    shareMediaToCorp( query ).then(response => {
                        if( response.errcode == 0 ){
                            ElMessage({type: 'success', message: '分享成功', duration: 2000})
                            context.emit('cancelDialog')
                            context.emit('getData')
                        }else{
                            console.log(response)
                        }
                    })
                }).catch((err) => {
                    console.log(err)
                })


            }


            return {
                loading,
                shareConfirmButton,
                localTitle,
                localDialogVisible,
                localDialogData,
                localCancelDialog,
                corpPartnerRef,
                corpPartnerCheckList,
                handleMediaShare,
                moreClick,
                isDisabled
            }
        }
    }
</script>

<style scoped  lang="scss">
    .corpchckgroup{
        background: #f1f1f1;
        padding: 5px 10px;
        margin-top: 10px;
        .el-checkbox{
            display: flex;
            height: 25px;
        }
    }
    .sharetitle{font-size:16px;font-weight: 700;color: #333;margin-bottom: 5px;}
    .el-scrollbar__wrap{
        .medianame{margin-bottom: 5px;}
    }
    .mediaboxselect{
        overflow: hidden;
        height: 20px;
    }
    .mediaboxselectflow{
        overflow: auto;
        height: auto;
    }
    .clsmore{
        >a{color:#409eff;cursor: pointer;}
    }
</style>